<template>
  <div class="yxp-course">
    <TopBack :title="title" :courseId="toNumber(courseId)" :id="id" type="0"/>
    <div class="yxp-composition-main">
      <div class="composition-list" :class="{on: curIndex > -1}">
        <div class="composition-list-item" v-for="(item,i) in dataList" :key="item.id"   @click.stop="handleOpen(item,i)">
          <div class="title">
            <div class="title-l" :class="{on: item.mode < 2}">
              <span class="unit" v-html="item.title"></span>
            </div>
            <div class="title-r">
              <img  style="margin-top:2px;"  src="@/assets/composition/open-icon.png" v-if="!item.isHidden"/>
              <img  style="margin-top:10px;" src="@/assets/composition/hidden-icon.png" v-else />
            </div>
          </div>
          <div class="list" v-if="item.isHidden">
              <div class="list-item" v-for="(elem,k) in item.list" :key="elem.id"  :class="{close: item.isClosed > 1 && elem.mode === 3, active: elem.num > 0}" @click.stop="getDetail(elem,item.isClosed,k)">
                <div class="list-item-l" :class="{on: item.isClosed < 2}">
                  <span>{{elem.title}}</span>
                </div>
                <div class="list-item-r">
                  <span class="star">
                    <img src="@/assets/composition/star-icon.png" v-for="(n,m) in elem.star" :key="'star' + m" />
                  </span>
                </div>
                  <img src="@/assets/composition/com-one.png" class="complete" v-if="elem.num === 1" />
                  <img src="@/assets/composition/com-two.png" class="complete" v-if="elem.num === 2" />
                  <img src="@/assets/composition/com-three.png" class="complete" v-if="elem.num === 3"/>
                  <img src="@/assets/composition/com-four.png" class="complete" v-if="elem.num === 4" />
                  <img src="@/assets/composition/com-five.png" class="complete" v-if="elem.num > 4" />
                  <img src="@/assets/composition/closed.png" class="closed"  v-if="item.isClosed > 1 && elem.mode === 3"/>
              </div>
            </div>
        </div>
      </div>
      <Empty v-if="isNone" />
    </div>
  </div>
</template>
<script>
import TopBack from '@/views/components/TopBack.vue'
import Empty from '@/views/components/empty.vue'
import {storage} from "@/utils/storage";
import {writingCourseInfo, writingModelList} from "@/api/reverse";
import {toNumber} from "lodash/lang";
export default {
  name: 'courseList',
  components: {
    Empty,
    TopBack
  },
  data () {
    return {
      title: '写作模型',
      id: '',
      courseId: 0,
      course_type: 0,
      dataList: [],
      isNone: false,
      curIndex: -1,
      isDouble: false
    }
  },
  created () {
    if (this.$route.query.userid) {
      let { userid } = this.$route.query
      this.id = +userid
      this.courseId = this.$route.query.course_id
    }
    this.getEssayList()
    this.isDouble = this.getClientWidth()
  },
  mounted() {
    window.onresize = () => {
      if(this.isDouble != this.getClientWidth()) {
          this.isDouble = this.getClientWidth();
      }
    }
  },
  methods: {
    toNumber,
    getClientWidth() {
      return document.body.clientWidth >= 1200 ? true : false;
    },
    handleOpen (item,i) {
      this.dataList.map((elem,index) => {
        if (i !== index) {
          elem.isHidden = false
        }
      })
      const obj = this.dataList[i]
      let isOpen = item.isHidden ? false : true
      this.curIndex = isOpen ? i : -1
      this.$set(obj, 'isHidden', isOpen)
    },
    async getEssayList () {
      // let params = {
      //   curr_id: this.id
      // }
      // console.log(this.id)
      // let data = await essayList(params)
      // if (data.code === 1) {
      //   if (data.data.list.length === 0) {
      //     this.isNone = true
      //   }
      //   this.course_type = data.data.type
      //   data.data.list.map(item => {
      //     item.isHidden = false
      //     item.isClosed = 0
      //     item.essay.map((elem,i) => {
      //       if (i === 0 || i === 1) {
      //         if (elem.num === 0) {
      //           item.isClosed++
      //         }
      //       }
      //     })
      //   })
        let params = {
          userId: this.id
        }
        await writingModelList(params).then((data)=>{
          this.dataList = data.data

          this.dataList.map(item => {
              item.isHidden = false
              item.isClosed = 0
              item.list.map((elem,i) => {

                if (i === 0 || i === 1) {
                  if (elem.num === 0) {
                    item.isClosed++
                  }
                }
              })
            })
          // console.log(this.dataList)
        })
      // } else if (data.code === 10001 || data.code === '10001') {
      //   this.$loading.hide()
      //   this.$toast('token失效，请重新登录')
      // } else {
      //   this.$loading.hide()
      //   this.$toast(data.info)
      // }
    },
    async getDetail (item,num,index) {
      if (num > 1 && index == 2) {
        this.$message.error('此篇还未解锁，请先学习模型一或模型二~')
        return
      }
      storage.set('ModeListInfo', item)
      let params = {
        id: item.id,
        userId:this.id
      }
      await writingCourseInfo(params).then((res)=>{
        this.getCheckEnd(item.id,res.data.progressSet)
        storage.set('sceneData', res.data)
      })
    },
    async getCheckEnd (bookId,progressSet) {
      switch (progressSet) {
        case 1:
          this.$router.push({
            path: '/composition/sceneIndex',
            query: {
              id: bookId,
              userid: this.id
            }
          })
              break;
          case 2:
            this.$router.push({
              path: '/composition/breakTrain',
              query: {
                userid: this.id,
                id:bookId,
              }
            })
              break;
            case 3:
              this.$router.push({
                path: '/composition/retell',
                query: {
                  userid: this.id,
                  id:bookId,
                }
              })
              break;
              case 4:
                this.$router.push({
                  path: '/composition/keepOut',
                  query: {
                    userid: this.id,
                    id:bookId,
                  }
                })
              break;
                case 5:
                  this.$router.push({
                    path: '/composition/uploadIndex',
                    query: {
                      userid: this.id,
                      id:bookId,
                    }
                  })
      }
      // this.$router.push({
      //   path: '/composition/sceneIndex',
      //   query: {
      //     id: id,
      //     userid: this.id
      //   }
      // })
      // let data = await checkEnd(params)
      // if (data.code === 1) {
      //   let type = data.data
      //   switch(type) {
      //     case 0:
      //       this.$router.push({
      //         path: '/composition/sceneIndex',
      //         query: {
      //           courseId: this.id,
      //           id: id,
      //           course_type: this.course_type
      //         }
      //       })
      //       break;
      //     case 1:
      //       this.$router.push({
      //         path: '/composition/breakTrain',
      //         query: {
      //           courseId: this.id,
      //           id: id,
      //           course_type: this.course_type
      //         }
      //       })
      //       break;
      //     case 2:
      //       this.$router.push({
      //         path: '/composition/retell',
      //         query: {
      //           courseId: this.id,
      //           id: id,
      //           course_type: this.course_type
      //         }
      //       })
      //       break;
      //     case 3:
      //       this.$router.push({
      //         path: '/composition/spell',
      //         query: {
      //           courseId: this.id,
      //           id: id,
      //           course_type: this.course_type
      //         }
      //       })
      //       break;
      //     case 4:
      //       this.$router.push({
      //         path: '/composition/keepOut',
      //         query: {
      //           courseId: this.id,
      //           id: id,
      //           course_type: this.course_type
      //         }
      //       })
      //       break;
      //     case 5:
      //       this.$router.push({
      //         path: '/composition/enRead',
      //         query: {
      //           courseId: this.id,
      //           id: id,
      //           course_type: this.course_type
      //         }
      //       })
      //       break;
      //     case 6:
      //       this.$router.push({
      //         path: '/composition/uploadIndex',
      //         query: {
      //           courseId: this.id,
      //           id: id,
      //           course_type: this.course_type
      //         }
      //       })
      //       break;
      //     default:
      //       break;
      //   }
      // } else if (data.code === 10001 || data.code === '10001') {
      //   this.$loading.hide()
      //   this.$toast('token失效，请重新登录')
      // } else {
      //   this.$loading.hide()
      //   this.$toast(data.info)
      // }
    }
  }
}
</script>
<style  scoped>
.yxp-composition-main{
  background: #F0F2F4;
  display: flex;
  justify-content: center;
  overflow-y: auto;
}
.yxp-composition-main .on {
  align-items: flex-start;
}
.yxp-composition-main .composition-list {
  display: flex;
  flex-direction: column;
  /* //justify-content: center; */
  padding: 20px 0px;
  width: 750px;
}
.yxp-composition-main .composition-list-item {
  width: 750px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
  padding: 35px 40px 40px;
  cursor: pointer;
  transition: box-shadow 0.3s;
}
.yxp-course{
  display: flex;
  height: 100%;
  background: #F0F2F4;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
}
.yxp-composition-main .composition-list-item:hover {
  box-shadow: 0px 0px 10px rgba(39, 191, 163, 0.5);
}
.yxp-composition-main .composition-list-item .on {
  color: #27BFA3 !important;
}
.yxp-composition-main .composition-list-item .on .unit-main {
  color: #27BFA3 !important;
}
.yxp-composition-main .composition-list-item .title {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.yxp-composition-main .composition-list-item .title-l {
  display: flex;
  font-size: 24px;
  color: #333333;
  text-align: left;
}
.yxp-composition-main .composition-list-item .title-l .unit {
  font-size: 24px;
  font-weight: bold;
  min-width: 96px;
  margin-right: 46px;
}
.yxp-composition-main .composition-list-item .title-l .unit-main {
  flex: 2;
}
.yxp-composition-main .composition-list-item .title-l .unit-main-name {
  font-size: 24px;
  font-weight: 400;
  line-height: 31px;
}
.yxp-composition-main .composition-list-item .title-r {
  cursor: pointer;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}
.yxp-composition-main .composition-list-item .title-r img {
  width: 22px;
  height: 22px;
  vertical-align: middle;
}
.yxp-composition-main .composition-list-item .list {
  text-align: left;
  margin-top: 54px;
}
.yxp-composition-main .composition-list-item .list .complete {
  position: absolute;
  right: 0;
  top: 4px;
  width: 56px;
  height: 53px;
}
.yxp-composition-main .composition-list-item .list .active {
  border-color: #27BFA3;
  background: #f4fffd;
}
.yxp-composition-main .composition-list-item .list .active .list-item-l span {
  color: #27BFA3;
}
.yxp-composition-main .composition-list-item .list .close {
  background: #F8F8F8;
}
.yxp-composition-main .composition-list-item .list .close .list-item-l span {
  color: #BFBFBF;
}
.yxp-composition-main .composition-list-item .list .closed {
  position: absolute;
  right: 22px;
  top: 22px;
  width: 13px;
  height: 16px;
}
.yxp-composition-main .composition-list-item .list-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  background: #ffffff;
  border: 1px solid #e6e6e6;
  opacity: 1;
  border-radius: 6px;
  padding-left: 30px;
  margin-bottom: 20px;
}
.yxp-composition-main .composition-list-item .list-item-l {
  display: flex;
  align-items: center;
  flex: 2;
}
.yxp-composition-main .composition-list-item .list-item-l span {
  font-size: 20px;
  font-weight: 400;
  line-height: 26px;
  color: #333333;
}
.yxp-composition-main .composition-list-item .list-item-r {
  flex: 1;
}
.yxp-composition-main .composition-list-item .list-item-r .star {
  white-space: nowrap;
}
.yxp-composition-main .composition-list-item .list-item-r .star img {
  width: 22px;
  height: 20px;
  margin-right: 5px;
  vertical-align: top;
}

</style>